<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI - 单文件测试</title>

    <!-- 引入Vue，国内的CDN https://www.bootcdn.cn/ 或者从官网下载了，放在本地 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 图标库 -->
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus"></script>

</head>

<body>
    <div id="Application" style="text-align: center;">

        <el-button>测试</el-button>
        <el-button type="primary" icon="Delete"></el-button>
    </div>

    <script>
        // 此处的脚本只能放在body中，放在header中将不能正常加载样式
        const App = {}

        // 挂载相关的ElementPlus功能
        let instance = Vue.createApp(App)
        // 加载ElementPlus模块
        instance.use(ElementPlus)

        // 去除下面的代码，按钮上的 icon="Delete" 将不起作用
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            instance.component(key, component)
        }
        instance.mount("#Application") 
    </script>
</body>

</html>